<template>
	<view class=" bg">
		<view class="">
			<!-- 头像 -->
			<u-popup v-model="show" mode="bottom" width="100%" height="300rpx" border-radius="18">
				<view class="">
					<u-button class="custom-style" @click="photograph" :hair-line='false'>拍照</u-button>
					<u-button class="custom-style" @click="choose" :hair-line='false'>从手机相册选择</u-button>
					<u-button class="custom-style" :hair-line='false' @click="show=false">取消</u-button>
				</view>
			</u-popup>
			<u-button class="custom-style head" :hair-line='false' @click="show = true" style="">
				<view class="fw">
					头像
				</view>
				<view class="flex1 flex-between" style="width: 120rpx;">
					<view class="upImg">
						<image v-if="info.head_image" :src="info.head_image" mode="" class="photo" style="border-radius: 50%;"></image>
						<image v-else src="../../static/my/userLogo.jpg" mode="" class="photo" style="border-radius: 50%;"></image>
					</view>

					<u-icon name="arrow-right"></u-icon>
				</view>
			</u-button>
			<!-- 昵称 -->
			<u-button class="custom-style head" :hair-line='false' style="" @click=gochangename()>
				<view class="fw">
					昵称
				</view>
				<view class="flex1 flex-between" style="">
					<view class="mr-30">
						{{info.nick_name}}
					</view>

					<u-icon name="arrow-right"></u-icon>
				</view>
			</u-button>
			<!-- 手机号 -->
			<u-button class="custom-style head" :hair-line='false' style="">
				<view class="fw">
					手机号
				</view>
				<view class="flex1 flex-between" style="">
					<view class="">
						{{info.phone}}
					</view>

				</view>
			</u-button>
			<!-- 区域链地址 -->
			<u-button class="custom-style head mt-20" :hair-line='false' style="" @click=copy(userInfo.wallet_address)>
				<view class="fw">
					区域链地址
				</view>
				<view class="flex1 flex-between" style="">
					<view class="areachainaddress" style="">{{info.wallet_address}}</view>
					<u-icon name="attach"></u-icon>
				</view>
			</u-button>
			<!-- 操作密码 -->
			<u-button class="custom-style head mt-20" :hair-line='false' @click=gochangepwd()>
				<view class="fw">
					操作密码
				</view>
				<view class="flex1 flex-between" style="">

					<u-icon name="arrow-right"></u-icon>
				</view>
			</u-button>
			<!-- 收货地址 -->
			<u-button class="custom-style head mt-20" :hair-line='false' @click=godress()>
				<view class="fw">
					收货地址
				</view>
				<view class="flex1 flex-between" style="">

					<u-icon name="arrow-right"></u-icon>
				</view>
			</u-button>
			<!-- 注销账户 -->
			<u-button class="custom-style head mt-20" :hair-line='false' @click=goaccountcAncellation()>
				<view class="fw">
					注销账户
				</view>
				<view class="flex1 flex-between" style="">

					<u-icon name="arrow-right"></u-icon>
				</view>
			</u-button>
			<!-- <u-button type="primary" hover-class="none" style="color: #fff!important;" class="mt-100"
				@click="submitUser">提交</u-button> -->
			<view class="ouaccount" @click="quit">
				<view class="ouaccount_text">
					退出账号
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		upload
	} from '../../common/common.js'
	export default {
		data() {
			return {
				show: false,
				userInfo: {
					head_image: '',

				},
				phonenums: "",
				con: '',
				info: {}
			}
		},
		onShow() {
			// this.$http('api/user/userInfo').then(res => {
			// 	this.userInfo = res;
			// });
			this.init();

		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
				
			}, 1000);
			// this.$http('api/user/userInfo').then(res => {
			// 	this.userInfo = res;
			// });
			this.init();
		},
		methods: {
			// 拍照
			photograph(){
				console.log('11')
			},
			// 从手机相册选择
			choose(){
				upload().then(res => {
					console.log(res.code)
					if(res.code==0){
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}else{
						this.info.head_image = res.path;
						this.submitUser()
					}
					
				})
				this.show=false
			},
			// 保存
			submitUser() {
				console.log('保存')
				if (this.info.nick_name == '') {
					uni.showToast({
						title: "请输入昵称!",
						icon: 'none'
					})
					return;
				}
				if (this.info.head_image == '') {
					uni.showToast({
						title: "请上传头像!",
						icon: 'none'
					})
					return;
				}
				this.$http('api/user/editUserInfo', {
					nick_name: this.info.nick_name,
					head_image: this.info.head_image
				}, "POST").then(res => {
					uni.showToast({
						title: "修改成功!"
					})
					this.init();
				})
			},
			// 注销账户
			goaccountcAncellation(){
				uni.navigateTo({
					url:'../my/accountcAncellation'
				})
			},
			// 收货地址
			godress() {
				uni.navigateTo({
					url: '../my/myDress'
				})
			},
			// 操作密码
			gochangepwd() {
				uni.navigateTo({
					url: '../my/safeCenter'
				})
			},
			// 修改昵称
			gochangename() {
				uni.navigateTo({
					url: '../my/changeName'
				})
			},
			//退出账号
			quit() {
				wx.showToast({
					title: '退出登录成功!',
					icon: 'success'
				})
				setTimeout(() => {
					uni.removeStorageSync('token');
					uni.navigateTo({
						url: '../login/index'
					});
				}, 1000);
			},
			// upHead() {
			// 	upload().then(data => {
			// 		this.info.head_image = data.path;
			// 	})
			// },
			init() {
				this.$http('api/user/userInfo').then(res => {
					// console.log(res.wallet_address);
					this.info = res;
					let phonenum = this.info.phone
					let phonenums = phonenum.substr(0, 3) + "******" + phonenum.substr(8)
					this.info.phone = phonenums
					let wallet_addressnum = this.info.wallet_address
					let wallet_addressnums = wallet_addressnum.substr(0, 11) + "******" + wallet_addressnum.substr(
						8)
					this.info.wallet_address = wallet_addressnums

				})
			},

			copy(val) {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: val,
					success: function() {
						uni.hideToast();
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '区域链地址复制成功',
									icon: 'none'
								});
							}
						});
					}
				});
				// #endif
				// #ifdef H5
				this.$copyText(val).then(

					function(e) {
						// console.log(val, e);
						uni.showToast({
							title: '区域链地址复制成功!',
							icon: 'none'
						});
					},

				);
				// #endif
			},
			toAuth() {
				uni.navigateTo({
					url: "./realAuth"
				})
			},
			// submitUser() {
			// 	if (this.info.nick_name == '') {
			// 		uni.showToast({
			// 			title: "请输入昵称!",
			// 			icon: 'none'
			// 		})
			// 		return;
			// 	}
			// 	if (this.info.head_image == '') {
			// 		uni.showToast({
			// 			title: "请上传头像!",
			// 			icon: 'none'
			// 		})
			// 		return;
			// 	}
			// 	this.$http('api/user/editUserInfo', {
			// 		nick_name: this.info.nick_name,
			// 		head_image: this.info.head_image
			// 	}, "POST").then(res => {
			// 		uni.showToast({
			// 			title: "修改成功!"
			// 		})
			// 		this.init();
			// 	})
			// }
		}
	}
</script>

<style lang="less" scoped>
	page{
		background-color: #FAFAFA;
	}
	.areachainaddress {
		width: 200rpx;
		max-width: 400rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.custom-style {
		border: none;
		 
	}

	.upImg {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;

	}

	.head {
		display: flex;
		justify-content: space-between;
		// border-bottom: 1px solid #F4F6F8;
	}

	::v-deep  .uni-input-input:nth-last-child(2) {
		width: 10rpx;
	}

	.dress {
		color: red;
	}



	.u-field {
		// color: #fff;
	}

	.ouaccount {
		width: 90%;
		height: 100rpx;
		background-image: linear-gradient(to right, #606060, #2B2B2B);
		border-radius: 20rpx;
		position: fixed;
		bottom: 2%;
		left: 5%;

		.ouaccount_text {
			color: #FFF;
			text-align: center;
			line-height: 100rpx;
			font-size: 24rpx;
			font-weight: 600;
		}
	}
</style>
